<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="goAdd"
    >
      {{ $t('添加') }}
    </el-button>
    <el-table :data="orderData">
      <el-table-column label="ID" prop="id" width="60px" />
      <el-table-column label="分类名称" prop="name" />
      <el-table-column label="配置时间" prop="update_time" />
      <el-table-column
        :label="$t('操作')"
        width="150px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="editor(scope.row)" />
          <DelBtn
            @success="del(scope.row)"
            :confirm-content="$t('删除该询盘分类')"
          />
        </template>
      </el-table-column>
    </el-table>
    <BaseDialog
      :title="addForm.id ? $t('编辑') : $t('添加')"
      :dialog-show.sync="dialogShow"
      width="50%"
      footer
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item :label="$t('分类名称')" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import inquiryApi from '@/api/inquiry.js'
export default {
  data() {
    return {
      orderData: [], //
      dialogShow: false,
      addForm: {
        name: '',
        id: ''
      },
      rules: {
        name: [
          {
            required: 'true',
            message: this.$t('请输入分类名称'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },

  methods: {
    // 新增
    goAdd() {
      this.id = ''
      this.addForm = {}
      this.dialogShow = true
    },
    // 编辑
    editor(row) {
      const val = this.$lodash.cloneDeep(row)
      this.id = val.id
      this.addForm = {
        name: val.name,
        id: val.id
      }
      this.dialogShow = true
    },

    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            inquiryApi.inquiryCategorySave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          } else {
            inquiryApi.inquiryCategoryUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 查看模型字段列表
    // check(row) {
    //   this.$router.push({ name: 'modelField', query: { id: row.id }})
    // },
    // 删除
    del(row) {
      inquiryApi.inquiryCategoryDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    // 询盘列表
    getList() {
      inquiryApi.inquiryCategoryList().then(res => {
        this.orderData = res.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  margin-bottom: 20px;
}
</style>
